之前只知道JS是单线程的,却不知道浏览器的多进程是如何与JS协调工作的,这篇文章就主要介绍浏览器的的进程与JS线程之间的关系.
区分进程与线程
先来一波官方解释:
进程(process): 是一个具有独立功能的程序在数据集上的一次动态执行的过程,是操作系统进行资源分配和调度的一个独立单位,是应用程序运行的载体
线程(thread): 是程序执行中单一的顺序控制流程,是程序执行流的最小单元.
进程与线程的关系:
1. 进程是操作系统分配资源的最小单位,线程是程序执行中的最小单位.
2. 一个进程可以由多个线程组成,线程是一个进程中代码不同的执行路线.
3. 进程之间相互独立,但同一进程下各个线程共享程序的内存空间(包括代码段、数据集、堆等)及一些进程级的资源(如打开文件和信号)。
4. 调度和切换：线程上下文切换比进程上下文切换要快得多。
举个例子:
打开QQ,开了一个进程.
在这个进程里,传输文字开了一个线程,发语音开了一个线程,弹出对话框又开了一个线程.
也就是说多个线程支撑起了一个进程.一个进程负责调用多个线程
浏览器是多进程的
Chrome是多进程的,每个网页都是一个进程.
浏览器都包含哪些进程?
- Browser进程(主进程)
- 第三方插件进程(使用时才创建插件)
- GPU进程(用于3D绘制)
- 浏览器渲染进程(浏览器内核/Render进程)
每个tab页一个进程,互不影响.
渲染进程中的线程
- GUI线程
- JavaScript线程
- 定时器触发线程
- 事件触发线程
- 异步请求HTTP线程
渲染进程
GUI线程
负责渲染浏览器界面,解析html, css, 构建Dom树和RenderObject树,布局和绘制等.
当页面需要Repaint(重绘)或者reflow(重拍/回流)时,该线程就会执行.
GUI线程与JavaScript线程互斥.当JS线程执行时GUI线程会被挂起,当JS运行栈空闲时,Render调用GUI线程渲染页面.
JavaScript线程
JS内核,负责处理JavaScript脚本文件(例如V8引擎)
JSy引擎线程负责解析javascript脚本,运行代码
JS与GUI线程互斥,如果在head写了大量js代码,将会阻塞页面DOM渲染.
事件触发线程
- 当一个JS脚本解析时遇到异步任务(微任务/宏任务)时,将会调用定时触发线程/异步http请求线程,获得结果后存储在任务队列中,当JS执行栈空闲后,执行压栈操作.
微任务: Promise/Object.observe/mutationObserver
宏任务: setTimeput/setInterval/setImmediate
定时触发线程
setInterval和setTimeout所在的线程
W3C在HTML标准中规定setTimeout中低于4ms的时间间隔 算为4ms(写了0,也是4ms)
异步http请求线程
- XMLHttpRequest在连接后是通过浏览器新开一个线程请求，客户端接收到Response后,开发人员处理回包.执行函数将在JS线程空闲后进行压栈.
